<template>
  <div class="">颜色是：{{ colorValue }}</div>
</template>

<script>
export default {
  props: {},
  components: {
    // components: (reslove) => {
    // require(['', reslove]);
    // }
  },
  data() {
    return {
      colorValue: '',
    };
  },
  created() {
    this.initDataFun(); //初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  watch: {},
  computed: {},
  methods: {
    //初始化数据
    initDataFun() {
      let ary = '#';
      // 获取6位n-m之间的随机整数
      for (let i = 0; i < 6; i++) {
        // toString(16)转为16进制
        // toUpperCase()转为大写
        const key = String(getRandom(4, 13).toString(16).toUpperCase());
        ary += key;
      }
      // 50%几率生成的是#333333
      ary = Math.random() < 0.5 ? ary : '#333333';
      this.colorValue = ary;
      console.log(ary);

      // 生成随机数
      function getRandom(n1, m1) {
        let n = Number(n1); // 强制转换成数字
        let m = Number(m1);
        if (isNaN(n) || isNaN(m)) {
          // 判断是否为有效数字 ，其中一个不是有效数字就返回[0,1)之间的随机小数
          return Math.random();
        }
        if (n > m) {
          // 如果n>m则交换
          let temp = n;
          n = m;
          m = temp;
        }
        return Math.round(Math.random() * (m - n) + n);
      }
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped></style>
